<template>
	<view class="home-box">
		<view class="title">基础信息</view>
		<view class="model">
			<u-cell-group :border="false">
				<u-cell title="商品条码" :titleStyle="titleStyle">
					<u--input placeholder="请填写条码" v-model="goodInfo.barcode" slot="value" border="none"></u--input>
				</u-cell>
				<u-cell title="商品名称" :titleStyle="titleStyle">
					<u--input placeholder="请填写商品名称" v-model="goodInfo.goodsName" slot="value" border="none"></u--input>
				</u-cell>
				<u-cell title="商品描述" :titleStyle="titleStyle">
					<u--textarea slot="value" v-model="goodInfo.goodsDescription" placeholder="请输入商品描述"></u--textarea>
				</u-cell>
				<u-cell title="商品数量" :titleStyle="titleStyle">
					<u--input placeholder="请输入商品数量" v-model="goodInfo.stock" slot="value" border="none"></u--input>
				</u-cell>
				<u-cell title="数量单位" :titleStyle="titleStyle">
					<u--input placeholder="请输入数量单位" v-model="goodInfo.unit" slot="value" border="none"></u--input>
				</u-cell>
				<u-cell title="销售价格" :titleStyle="titleStyle">
					<u--input placeholder="请输入销售价格" v-model="goodInfo.salePrice" slot="value" border="none"></u--input>
				</u-cell>
				<u-cell title="进货价格" :titleStyle="titleStyle">
					<u--input placeholder="请输入进货价格" v-model="goodInfo.costPrice" slot="value" border="none"></u--input>
				</u-cell>
				<u-cell title="商品分类" :titleStyle="titleStyle" :isLink="true" @click="openClass">
					<view class="name" slot="value">{{className}}</view>
				</u-cell>
				<u-cell title="商品图片" :titleStyle="titleStyle">
					<u-upload :fileList="facadeList" @afterRead="afterReadfacade" @delete="deletePicfacade" name="1"
						multiple :maxCount="10" slot="value"></u-upload>
				</u-cell>
				<u-cell title="商品生产日期" :titleStyle="titleStyle" @click="openDate">
					<view class="name" slot="value">{{goodInfo.producerTime}}</view>
				</u-cell>
				<u-cell title="是否上架" :titleStyle="titleStyle">
					<u-switch slot="value" v-model="goodInfo.isDisplay"  size="20"></u-switch>
				</u-cell>
				<u-cell title="线上展示" :titleStyle="titleStyle">
					<u-switch slot="value" v-model="goodInfo.isOnline" size="20"></u-switch>
				</u-cell>
			</u-cell-group>
		</view>

		<u-datetime-picker ref="datetimePicker" :show="showDate" v-model="value1" mode="date" @confirm="confirmDate"></u-datetime-picker>
		<u-popup :show="showClass" @close="close" @open="open" mode="center">
			<view class="cate-input">
				<view class="cate-li" v-for="(item,index) in cateList" :key="index" @click="selectCate(item)">
					{{item.name}}
				</view>

			</view>
		</u-popup>



		<view class="button-box">
			<view class="cancelbtn" @click="cancel">取消</view>
			<view class="submitBtn" @click="saveGoods">确定</view>
		</view>

	</view>
</template>

<script>
	import {
		getStoreData,
		setStoreData,
		httpPost,
		httpGet
	} from "@/utils/http.js";
	import {
		appletImgUrl,
		imgUrl
	} from "@/common/config.js"
	export default {
		data() {
			return {
				imgUrl: imgUrl,
				titleStyle: {
					"font-size": "14px"
				},
				checkValue: [],
				isRev: false,
				value1: "",
				time: "",
				showStar: false,
				showEnd: false,
				value2: "",
				fileList1: [],
				value: "",
				goodInfo: {
					barcode: "",
					costPrice: "",
					goodsDetailImg: "",
					classId: "",
					goodsImg: "",
					goodsName: "",
					salePrice: "",
					stock: "",
					unit: "",
					goodsDescription: "",
					isDisplay: true,
					isOnline: true,
					producerName: "",
					producerTime: ""

				},
				facadeList: [],
				facadeImgs: [],
				showClass: false,
				cateList: [],
				className: "",
				storeId: "",
				value1: null,
				showDate: false

			};
		},
		onShow() {

		},
		onLoad(option) {
			//this.$refs.datetimePicker.setFormatter(this.formatter);
			if (option.goodInfo) {
				this.goodInfo = JSON.parse(option.goodInfo);
				this.facadeList.push({
					url: this.goodInfo.goodsImg
				});
				console.log(this.goodInfo)
				console.log(this.facadeList)
			}

		},
		methods: {
			openDate() {
				this.showDate = true;
			},
			
			openClass() {
				this.getStoreId();

			},
			getStoreId() {
				const _this = this;
				httpGet("/api/sellerstore/selfInfo")
					.then((res) => {
						if (res.data) {
							_this.storeId = res.data.id;
							_this.getClassList(res.data.id);
						}
					})
					.catch((e) => {});

			},
			getClassList(storeId) {
				const _this = this;
				httpGet("/api/barcodeclass/list/" + storeId)
					.then((res) => {
						_this.cateList = res.data;
						_this.showClass = true;
					})
					.catch((e) => {});
			},
			close() {
				this.showClass = false;
			},
			open() {
				this.showClass = true;
			},
			selectCate(data) {
				this.goodInfo.classId = data.id;
				this.className = data.name;
				this.showClass = false;
			},
			//checkboxChange(data) {},
			// changeRev() {

			// },
			// openStar() {
			// 	this.showStar = true;
			// },
			// openEnd() {
			// 	this.showEnd = true;
			// },
			// openAgreement() {},
			// confirmStar() {
			// 	this.showStar = false;
			// },
			// confirmEnd() {
			// 	this.showEnd = false;
			// },
			async afterReadfacade(event) {
				//console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);

				let fileListLen = this.facadeList.length;
				lists.map((item) => {
					this.facadeList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					//console.log('666',result)
					//this.facadeImgs.push(result[0].path+'/'+name);
					let item = this.facadeList[fileListLen]
					this.facadeList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				//console.log(this.facadeList,this.facadeImgs);
				this.getFacadeImgList(this.facadeList);

			},
			deletePicfacade(event) {
				this.facadeList.splice(event.index, 1)
				this.getFacadeImgList(this.facadeList);
			},
			getFacadeImgList(list) {
				console.log(list)
				let arr1 = [];
				let arr2 = [];
				if (list.length == 0) {
					this.facadeImgs = [];
				} else {
					this.facadeImgs = list.map((item) => {
						let imgUrl = item.url[0].path + '/' + item.url[0].name;
						return imgUrl
					})
				}

				console.log(this.facadeImgs)
				arr1 = this.facadeImgs.slice(0, 1);
				arr2 = this.facadeImgs.slice(1, this.facadeImgs.length);
				console.log(arr1, arr2)
				this.goodInfo.goodsImg = arr1.join(",");
				this.goodInfo.goodsDetailImg = arr2.join(",");
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://api.chain-pay.cn/api/upload/goods',
						filePath: url,
						name: 'file',
						header: {
							"Authorization": uni.getStorageSync("token")
						},

						success: (res) => {
							let imgObj = JSON.parse(res.data);
							console.log(JSON.parse(res.data))
							setTimeout(() => {
								resolve(imgObj.data)
							}, 1000)
						}
					});
				})
			},
			cancel() {
				uni.navigateBack();
			},
			confirmDate(value){
				console.log(value)
				this.goodInfo.producerTime=this.formatDate(value.value);
				console.log(this.goodInfo.producerTime)
				this.showDate = false;
			},
			formatDate(time){
				console.log(time);
				var date = new Date(time);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
				var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
				return Y+M+D
			},
			saveGoods() {
				const _this = this;
				if (this.goodInfo.barcode == "") {
					uni.showToast({
						icon: "none",
						title: "请输入商品条码"
					});
					return
				}
				if (this.goodInfo.costPrice == "") {
					uni.showToast({
						icon: "none",
						title: "请设置进货价"
					});
					return
				}
				if (this.goodInfo.goodsImg == "") {
					uni.showToast({
						icon: "none",
						title: "请上传商品图片"
					});
					return
				}
				if (this.goodInfo.classId == "") {
					uni.showToast({
						icon: "none",
						title: "请选择商品分类"
					});
					return
				}
				if (this.goodInfo.goodsName == "") {
					uni.showToast({
						icon: "none",
						title: "请填写商品名称"
					});
					return
				}
				if (this.goodInfo.stock == "") {
					uni.showToast({
						icon: "none",
						title: "请设置商品库存"
					});
					return
				}
				if (this.goodInfo.salePrice == "") {
					uni.showToast({
						icon: "none",
						title: "请设置商品售价"
					});
					return
				}
				if (this.goodInfo.unit == "") {
					uni.showToast({
						icon: "none",
						title: "请设置数量单位"
					});
					return
				}
				if (this.goodInfo.goodsDescription == "") {
					uni.showToast({
						icon: "none",
						title: "请填写商品描述"
					});
					return
				}

				httpPost("/api/barcodestore/save", this.goodInfo)
					.then((res) => {
						uni.showToast({
							icon: "none",
							title: "入库成功"
						});
						uni.navigateBack();
					})
					.catch((e) => {});
			}

		},
	};
</script>

<style lang="scss">
	.home-box {
		background-color: #F7F7F7;
		height: 100vh;
		padding-top: 20rpx;
	}

	.title {
		margin-bottom: 20rpx;
		padding-left: 30rpx;
	}

	.model {
		background-color: #fff;
		margin-bottom: 20rpx;

		.right-name {
			font-size: 28rpx;
		}

		.red {
			color: #f74f4f;
		}
	}

	.check-model {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-bottom: 20rpx;
		margin-right: 20rpx;

		.red {
			color: #f74f4f;
		}
	}

	.text-area-box {
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

	}


	.button-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.cancelbtn {
			width: 300rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.submitBtn {
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(to right, #28ECEA, #2695F5);

			color: #fff;
			text-align: center;
			border-radius: 20rpx;
			width: 300rpx;
		}
	}

	.cate-input {
		width: 500rpx;
		padding: 40rpx;

		.cate-li {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
		}

		.cate-li:nth-last-child(1) {
			border-bottom: none;
		}
	}
</style>